<template>
  <div  style="background-color: #e5e9f2; height: 800px;">
  <el-main>
    <div>
      <div class="block">
        时间&nbsp;
        <el-date-picker
          value-format="yyyy年MM月dd日"
          style="width:150px"
          size="mini"
          v-model="wallet.orderTime"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions">
        </el-date-picker>
        &nbsp;&nbsp;订单 &nbsp;<el-input v-model="wallet.orderId" placeholder="请输入订单号" style="width:150px" size="mini"></el-input>
        &nbsp;&nbsp;关联方 &nbsp;<el-input v-model="wallet.technician" placeholder="请输入关联方" style="width:150px" size="mini"></el-input>
        &nbsp;&nbsp;支付方式 &nbsp;<el-select v-model="wallet.payType" placeholder="请选择" style="width:150px" size="mini">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
        &nbsp;&nbsp;&nbsp;&nbsp;<el-button type="success" plain size="mini" @click="shaixuan">筛选</el-button>
      </div>

    </div>

    <div style="height:10px"></div>

  <div style="height: 500px;">

  <el-table
    :data="tableData"
    height="500"
    style="width: 100%">
    <el-table-column
      prop="orderTime"
      label="时间"
      align="center">
    </el-table-column>
    <el-table-column
      prop="orderId"
      label="订单号"
      align="center">
    </el-table-column>

    <el-table-column
      prop="technician"
      label="关联方"
      align="center">
    </el-table-column>

    <el-table-column
      prop="type"
      label="金额（元）"
      align="center">
      <template slot-scope="scope">
        <span v-if="scope.row.type == '收入'">+{{scope.row.income}}</span>
        <span v-if="scope.row.type == '支出'">-{{scope.row.amount}}</span>
      </template>
    </el-table-column>

    <!-- <el-table-column
     
      prop="type"
      label="金额（元）"
      align="center">
      
    </el-table-column> -->

    <el-table-column
      prop="balance"
      label="平台余额（元）"
      align="center">
    </el-table-column>
    <el-table-column
      prop="type"
      label="交易类型"
      align="center">
    </el-table-column>
    <el-table-column
      prop="payType"
      label="支付方式"
      align="center">
    </el-table-column>
  </el-table>
</div>
  <div class="block" style="text-align: right;">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 20]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>

</el-main>
</div>
</template>

<script>
  export default {
    methods: {
      shaixuan(){
        this.$axios.post("http://localhost:7600/wallet/filtrate",this.wallet).then(res => {
          console.log(res);
        this.tableData = res.data.data.list
        this.total = res.data.data.total
        })
        
      },
      handleClick(row) {
        console.log(row);
      },
      handleSizeChange(val) {
        this.handleSize = val
        this.$axios.get("http://localhost:7600/wallet/fistPage/1/"+this.handleSize).then(res => {
        this.total=res.data.data.total
        this.tableData=res.data.data.list
        })
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        
        this.handleCurrent = val
        this.$axios.get("http://localhost:7600/wallet/fistPage/"+this.handleCurrent+"/"+this.handleSize).then(res => {
        this.total=res.data.data.total
        this.tableData=res.data.data.list
        })
      }
    },

    mounted(){
      this.$axios.get("http://localhost:7600/wallet/fistPage/1/10").then(res => {
        console.log(res);
        this.total=res.data.data.total
        this.tableData=res.data.data.list
        })
        
    },

    data() {
      return {
        wallet:{
          orderTime:"",
          orderId:"",
          technician:"",
          payType:"",
        },
        tableData: [],
        currentPage4: 1,
        handleSize:5,
        total:0,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        options: [{
          value: '微信',
          label: '微信'
        }, {
          value: '支付宝',
          label: '支付宝'
        }, {
          value: '免密支付',
          label: '免密支付'
        }, {
          value: '平台',
          label: '平台'
        }],
        currentPage4: 1,
        

      }
    }
  }
</script>